<template>
	<view class="order-page">
		<!-- 地址信息 -->
		<view class="address-section">
			<view class="address-box">
				<image class="location-icon" src="/static/svg/location-icon.svg" mode="aspectFit"></image>
				<view class="address-info">
					<view class="name-phone">
						<text class="name">李小花</text>
						<text class="phone">1885138766</text>
					</view>
					<view class="address-detail">
						广东省广州市大华区明窗路科技园880号
					</view>
				</view>
				<image class="icon-right" src="/static/svg/right-arrow.svg" mode="aspectFit"></image>
			</view>
		</view>
		
		<!-- 订单商品 -->
		<view class="order-title">订单商品</view>
		
		<!-- 商品信息 -->
		<view class="goods-section">
			<view class="goods-item">
				<image class="goods-img" :src="productImage" mode="aspectFill"></image>
				<view class="goods-info">
					<view class="goods-title">{{ title }}</view>
					<view class="goods-sku">{{ skuText }}</view>
					<view class="goods-price">¥{{ price.toFixed(2) }}</view>
				</view>
			</view>
		</view>
		
		<!-- 购买数量 -->
		<view class="quantity-section">
			<text class="section-title">购买数量</text>
			<view class="quantity-control">
				<view class="quantity-btn minus" @click="decreaseQuantity">
					<image src="/static/svg/minus-icon.svg" mode="aspectFit"></image>
				</view>
				<view class="quantity-input">
					<input type="number" v-model="quantity" disabled />
				</view>
				<view class="quantity-btn plus" @click="increaseQuantity">
					<image src="/static/svg/plus-icon.svg" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		
		<!-- 优惠券 -->
		<view class="coupon-section" @click="selectCoupon">
			<text class="section-title">优惠券</text>
			<view class="coupon-right">
				<text class="coupon-value" v-if="couponAmount > 0">-¥{{ couponAmount.toFixed(2) }}</text>
				<text class="coupon-placeholder" v-else>选择优惠券</text>
				<image class="icon-right" src="/static/svg/right-arrow.svg" mode="aspectFit"></image>
			</view>
		</view>
		
		<!-- 运费 -->
		<view class="shipping-section">
			<text class="section-title">运费</text>
			<text class="shipping-fee">¥{{ shippingFee.toFixed(2) }}</text>
		</view>
		
		<!-- 合计 -->
		<view class="total-section">
			<text class="section-title">合计</text>
			<text class="total-amount">¥{{ totalAmount.toFixed(2) }}</text>
		</view>
		
		<!-- 开具发票 -->
		<view class="invoice-section" @click="toggleInvoice">
			<text class="section-title">开具发票</text>
			<switch :checked="needInvoice" color="#FF5722" @change="toggleInvoice" />
		</view>
		
		<!-- 支付方式 -->
		<view class="payment-section">
			<view class="payment-item" @click="selectWechatPay">
				<view class="payment-left">
					<image class="payment-icon" src="/static/svg/wechat-pay.svg" mode="aspectFit"></image>
					<text class="payment-name">微信支付</text>
				</view>
				<image class="check-icon" src="/static/svg/check-circle.svg" mode="aspectFit"></image>
			</view>
		</view>
		
		<!-- 底部支付栏 -->
		<view class="footer">
			<view class="total-section">
				<text class="total-text">实付款</text>
				<text class="total-price">¥{{ actualPayment.toFixed(2) }}</text>
			</view>
			<view class="pay-btn" @click="submitOrder">立即支付</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue';
	import { onLoad } from "@dcloudio/uni-app";
	
	// 商品信息
	const productImage = ref('/static/images/product-default.jpg');
	const title = ref('Kao 香水铃兰香120毫升/瓶【新老包装随机发货】');
	const skuText = ref('颜色分类：肉粉色');
	const price = ref(100.00);
	
	// 购买数量
	const quantity = ref(1);
	
	// 增加数量
	const increaseQuantity = () => {
		quantity.value++;
	};
	
	// 减少数量
	const decreaseQuantity = () => {
		if (quantity.value > 1) {
			quantity.value--;
		}
	};
	
	// 优惠券
	const couponAmount = ref(10.00);
	
	// 选择优惠券
	const selectCoupon = () => {
		uni.showToast({
			title: '选择优惠券',
			icon: 'none'
		});
	};
	
	// 运费
	const shippingFee = ref(10.00);
	
	// 合计金额 = 商品价格 × 数量
	const totalAmount = computed(() => {
		return price.value * quantity.value;
	});
	
	// 实际支付金额 = 合计金额 - 优惠券金额
	const actualPayment = computed(() => {
		return totalAmount.value;
	});
	
	// 是否需要发票
	const needInvoice = ref(false);
	
	// 切换是否需要发票
	const toggleInvoice = () => {
		needInvoice.value = !needInvoice.value;
	};
	
	// 选择微信支付
	const selectWechatPay = () => {
		// 已经默认选中，无需操作
	};
	
	// 提交订单
	const submitOrder = () => {
		uni.showLoading({
			title: '支付中...'
		});
		
		setTimeout(() => {
			uni.hideLoading();
			
			// 支付成功后跳转到支付成功页面
			uni.navigateTo({
				url: '/pages/index/payment-success?amount=' + actualPayment.value
			});
		}, 1500);
	};
</script>

<style>
	.order-page {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 120rpx;
	}
	
	/* 地址信息 */
	.address-section {
		background-color: #fff;
		margin-bottom: 20rpx;
		padding: 30rpx;
	}
	.address-box {
		display: flex;
		align-items: flex-start;
	}
	.location-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
		margin-top: 6rpx;
	}
	.address-info {
		flex: 1;
	}
	.name-phone {
		margin-bottom: 10rpx;
		display: flex;
		align-items: center;
	}
	.name {
		font-size: 32rpx;
		font-weight: bold;
		margin-right: 20rpx;
		color: #333;
	}
	.phone {
		font-size: 28rpx;
		color: #666;
	}
	.address-detail {
		font-size: 28rpx;
		color: #333;
		line-height: 1.5;
	}
	.icon-right {
		width: 40rpx;
		height: 40rpx;
		margin-left: 20rpx;
	}
	
	/* 订单标题 */
	.order-title {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
		padding: 30rpx 30rpx 0;
	}
	
	/* 商品信息 */
	.goods-section {
		background-color: #fff;
		margin-bottom: 20rpx;
		padding: 30rpx;
	}
	.goods-item {
		display: flex;
	}
	.goods-img {
		width: 160rpx;
		height: 160rpx;
		margin-right: 20rpx;
		border-radius: 10rpx;
	}
	.goods-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.goods-title {
		font-size: 28rpx;
		color: #333;
		line-height: 1.5;
		margin-bottom: 10rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.goods-sku {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 15rpx;
	}
	.goods-price {
		font-size: 30rpx;
		color: #FF5722;
		font-weight: bold;
	}
	
	/* 通用样式 */
	.quantity-section,
	.coupon-section,
	.shipping-section,
	.total-section,
	.invoice-section,
	.payment-section {
		background-color: #fff;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #f5f5f5;
	}
	
	.section-title {
		font-size: 28rpx;
		color: #333;
	}
	
	/* 购买数量 */
	.quantity-control {
		display: flex;
		align-items: center;
		border: 1px solid #eee;
		border-radius: 4rpx;
		overflow: hidden;
	}
	.quantity-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.quantity-btn image {
		width: 28rpx;
		height: 28rpx;
	}
	.quantity-input {
		width: 80rpx;
		text-align: center;
		border-left: 1px solid #eee;
		border-right: 1px solid #eee;
	}
	.quantity-input input {
		height: 60rpx;
		text-align: center;
		font-size: 28rpx;
	}
	
	/* 优惠券 */
	.coupon-right {
		display: flex;
		align-items: center;
	}
	.coupon-value {
		font-size: 28rpx;
		color: #FF5722;
		margin-right: 10rpx;
	}
	.coupon-placeholder {
		font-size: 28rpx;
		color: #999;
		margin-right: 10rpx;
	}
	
	/* 运费 */
	.shipping-fee {
		font-size: 28rpx;
		color: #333;
	}
	
	/* 合计 */
	.total-amount {
		font-size: 28rpx;
		color: #FF5722;
		font-weight: bold;
	}
	
	/* 支付方式 */
	.payment-section {
		padding: 0;
	}
	.payment-item {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.payment-left {
		display: flex;
		align-items: center;
	}
	.payment-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	.payment-name {
		font-size: 28rpx;
		color: #333;
	}
	.check-icon {
		width: 40rpx;
		height: 40rpx;
	}
	
	/* 底部支付栏 */
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	.total-section {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-right: 30rpx;
	}
	.total-text {
		font-size: 28rpx;
		color: #333;
		margin-right: 10rpx;
	}
	.total-price {
		font-size: 36rpx;
		color: #FF5722;
		font-weight: bold;
	}
	.pay-btn {
		width: 240rpx;
		height: 100%;
		background-color: #FF5722;
		color: #fff;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
